<template>
	<div class="layout-form fixed-layout add-case">
		<div class="fixed-section">
			<div class="title"></div>
			<button @click="showTipsLayer">保存</button>
			<button class="btn-cancel" @click="cancelForm">返回</button>
		</div>
		<div class="section section-form">
			<el-form :ref="formData.ref" :inline="true" :model="formData">
				<div class="section-title">
					<span>举报人信息</span>
				</div>
				<div class="section-content">
					<el-form-item label="举报人姓名" prop="reflectName">
						<el-input v-model="formData.caseInformer.reflectName" placeholder="请输入举报人姓名"></el-input>
					</el-form-item>
					<el-form-item label="举报人性别" prop="reflectSex">
						<el-select v-model="formData.caseInformer.reflectSex" placeholder="请选择举报人性别">
							<el-option label="男" value="1"></el-option>
							<el-option label="女" value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="举报人手机号" prop="reflectPhone">
						<el-input v-model="formData.caseInformer.reflectPhone" placeholder="请输入举报人手机号"></el-input>
					</el-form-item>
					<el-form-item label="举报人身份证" prop="reflectIdentity">
						<el-input v-model="formData.caseInformer.reflectIdentity" placeholder="请输入举报人身份证"></el-input>
					</el-form-item>
					<el-form-item label="授信时间" prop="creditDate">
						<el-date-picker v-model="formData.caseInformer.creditDate" value-format="yyyy-MM-dd" type="date" placeholder="选择授信时间">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="授信金额" prop="creditMoney">
						<el-input v-model="formData.caseInformer.creditMoney" placeholder="请输入授信金额"></el-input>
					</el-form-item>
					<el-form-item label="借款时间" prop="borrowDate">
						<el-date-picker v-model="formData.caseInformer.borrowDate" value-format="yyyy-MM-dd" type="date" placeholder="选择借款时间">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="借款金额" prop="borrowMoney">
						<el-input v-model="formData.caseInformer.borrowMoney" placeholder="请输入借款金额"></el-input>
					</el-form-item>
					<el-form-item label="客户经理是否变动" prop="managerChange">
						<el-select v-model="formData.caseInformer.managerChange" placeholder="请选择客户经理是否变动">
							<el-option label="是" value="1"></el-option>
							<el-option label="否" value="0"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="当前客户经理" prop="customerManager">
						<el-input v-model="formData.caseInformer.customerManager" placeholder="请输入当前客户经理"></el-input>
					</el-form-item>
					<el-form-item label="当前客户经理手机" prop="customerManagerPhone">
						<el-input v-model="formData.caseInformer.customerManagerPhone" placeholder="请输入当前客户经理手机"></el-input>
					</el-form-item>
					<el-form-item label="历史客户经理" prop="historyCustomerManager">
						<el-input v-model="formData.caseInformer.historyCustomerManager" placeholder="多名请用 “,” 隔开"></el-input>
					</el-form-item>
					<el-form-item label="举报人所属营业部" prop="salesDeptCode">
						<el-select v-model="formData.caseInformer.salesDeptCode" placeholder="请搜索举报人所属营业部" filterable remote :remote-method="searchSalesDept"
						 :loading="salesDeptData.loading" @change="salesDeptChange">
							<el-option v-for="item in salesDeptData.list" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</div>
				<div class="section-title">
					<span>被举报人信息</span>
				</div>
				<div class="section-content">
					<el-form-item label="被举报人姓名" prop="beReportedName">
						<el-input v-model="formData.caseBeReported.beReportedName" placeholder="请输入被举报人姓名"></el-input>
					</el-form-item>
					<el-form-item label="被举报人手机" prop="beReportedPhone">
						<el-input v-model="formData.caseBeReported.beReportedPhone" placeholder="请输入被举报人手机"></el-input>
					</el-form-item>
					<el-form-item label="被举报人身份证" prop="beReportedIdentity">
						<el-input v-model="formData.caseBeReported.beReportedIdentity" placeholder="请输入被举报人身份证"></el-input>
					</el-form-item>
					<el-form-item label="被举报人所属公司" prop="beReportedOrg">
						<el-select v-model="formData.caseBeReported.beReportedOrg" placeholder="请搜索被举报人所属公司" filterable remote :remote-method="searchBusinessMethod"
						 :loading="search.loading">
							<el-option v-for="item in search.list" :key="item.code" :label="item.name" :value="item.name"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="被举报人所属部门" prop="beReportedDept">
						<el-select v-model="formData.caseBeReported.beReportedDept" placeholder="请搜索被举报人所属部门" filterable remote :remote-method="searchBusinessMethod"
						 :loading="search.loading">
							<el-option v-for="item in search.list" :key="item.code" :label="item.name" :value="item.name"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="被举报人所属营业部" prop="beReportedBusiness">
						<!-- <el-select v-model="formData.caseBeReported.beReportedBusiness" filterable placeholder="请搜索被举报人所属营业部" @focus="searchBusinessMethod">
							<el-option v-for="item in search.list" :key="item.code" :label="item.name" :value="item.name"></el-option>
						</el-select> -->
						<el-select v-model="formData.caseBeReported.beReportedBusiness" placeholder="请搜索举报人所属营业部" filterable remote :remote-method="searchSalesDept"
						 :loading="salesDeptData.loading">
							<el-option v-for="item in salesDeptData.list" :key="item.id" :label="item.deptName" :value="item.deptName"></el-option>
						</el-select>
					</el-form-item>
				</div>
				<div class="section-title">
					<span>线索信息</span>
				</div>
				<div class="section-content">
					<el-form-item label="来源渠道" prop="source" class="is-required">
						<el-select v-model="formData.caseInfo.source" placeholder="请选择">
							<el-option v-for="item in dicts.sourceType" :key="item.id" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="产品类型" prop="product" class="is-required">
						<el-select v-model="formData.caseInfo.product" placeholder="请选择">
							<el-option v-for="item in dicts.productType" :key="item.id" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="案件获取日期" prop="gainCaseDate">
						<el-date-picker v-model="formData.caseInfo.gainCaseDate" value-format="yyyy-MM-dd" type="date" placeholder="请选择日期">
						</el-date-picker>
					</el-form-item>
					<!-- <el-form-item label="所属分部" prop="salesDeptName">
						<el-select v-model="formData.caseInfo.salesDeptName" placeholder="请选择所属分部" @change="selectSalesDeptName">
							<el-option v-for="item in deptList" :key="item.deptCode" :label="item.name" :value="item.name"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="分部负责人" prop="salesDeptPrincipal">
						<el-select v-model="deptPrincipal.name" placeholder="请选择分部负责人">
							<el-option v-for="item in deptPrincipalList" :key="item.id" :label="item.name" :value="item.name"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="风险类别">
						<el-select v-model="riskCategoryForm.id" placeholder="请选择" @change="riskCategoryChange">
							<el-option v-for="item in dicts.riskCategory" :key="item.value" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="风险类型">
						<el-select v-model="riskTypeForm.value" placeholder="请选择" @change="riskTypeChange">
							<el-option v-for="item in riskTypeList" :key="item.id" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="风险等级">
						<el-select v-model="riskLevelForm.value" placeholder="请选择">
							<el-option v-for="item in riskLevelList" :key="item.id" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item> -->
					<!-- <el-form-item label="案件类型" prop="caseType">
						<el-select v-model="formData.caseInfo.caseType" placeholder="请选择">
							<el-option v-for="item in dicts.caseType" :key="item.id" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item class="form-block is-required" label="反馈详情" prop="reflectContent">
						<el-input type="textarea" v-model="formData.caseInfo.reflectContent" placeholder="请输入反馈详情"></el-input>
					</el-form-item>
					<el-form-item class="form-block" label="备注" prop="remark">
						<el-input type="textarea" v-model="formData.caseInfo.remark" placeholder="请输入备注"></el-input>
					</el-form-item>
				</div>
			</el-form>
			<div class="el-form-item form-upload">
				<label class="el-form-item__label">举证资料</label>
				<div class="el-form-item__content">
					<el-upload class="upload-demo" :action="form.uploadUrl" :on-success="uploadSuccess" :on-remove="removeUploadFile" :before-upload="beforeUpload"
					 :file-list="fileList">
						<button class="btn-upload">
							<i class="icon i-upload"></i>
							<span>上传文件</span>
						</button>
						<!-- <div slot="tip" class="el-upload__tip">上传文件大小不能超过100MB</div> -->
					</el-upload>
				</div>
			</div>
			<div class="section-title">
				<span>提案审批</span>
			</div>
			<div class="section-content">
				<div class="section-tool">
					<button @click.prevent="showProposalLayer">新增记录</button>
				</div>
				<el-table border :data="proposalTableData.data" tooltip-effect="dark">
					<el-table-column fixed label="操作" width="60">
						<template slot-scope="scope">
							<a @click="delCaseRisk(scope.$index)">删除</a>
						</template>
					</el-table-column>
					<el-table-column prop="creator" label="记录人" width="100">
					</el-table-column>
					<el-table-column prop="cdate" label="记录时间" width="160">
					</el-table-column>
					<el-table-column prop="riskCategoryName" label="风险类别" width="180">
					</el-table-column>
					<el-table-column prop="riskTypeName" label="风险类型" width="180">
					</el-table-column>
					<el-table-column prop="riskLevelName" label="风险等级" width="100">
					</el-table-column>
					<el-table-column prop="riskDisposeDateName" label="处理时长" width="130">
					</el-table-column>
					<el-table-column prop="riskDetailsName" label="详情描述">
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!-- 提案审批 -->
		<layer class="layer-form-inline" :data="proposalLayer" @on-ok="saveProposal">
			<div class="alert alert-warning">
				<i class="icon i-warning"></i>
				<p>请按照由S→C→B→A的风险等级，依次进行填写！</p>
			</div>
			<el-form :inline="true">
				<el-form-item label="风险类别" class="is-required">
					<el-select v-model="riskCategoryForm.id" placeholder="请选择风险类别" @change="riskCategoryChange">
						<el-option v-for="item in dicts.riskCategory" :key="item.value" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="风险类型" class="is-required">
					<el-select v-model="riskTypeForm.value" placeholder="请选择风险类型" @change="riskTypeChange" no-data-text="请先选择风险类别">
						<el-option v-for="item in riskTypeList" :key="item.id" :label="item.name" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="风险等级" class="is-required">
					<el-select v-model="riskLevelForm.value" placeholder="请选择风险等级" @change="riskLevelChange" no-data-text="请先选择风险类型">
						<el-option v-for="item in riskLevelList" :key="item.id" :label="item.name" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="riskDisposeDate" label="处理时长" class="is-required">
					<el-select v-model="riskDisposeDateForm.value" placeholder="请选择处理时长" no-data-text="请先选择风险等级">
						<el-option v-for="item in riskDisposeDateList" :key="item.id" :label="item.name" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="form-block is-required" prop="riskDetails" label="详情描述">
					<el-select v-model="riskDetailsForm.value" placeholder="请选择详情描述" no-data-text="请先选择风险类型">
						<el-option v-for="item in riskDetailsList" :key="item.id" :label="item.name" :value="item.name"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</layer>
		<!-- 提示 -->
		<layer :data="tipsLayer" @on-ok="submitForm"></layer>
	</div>
</template>
<script>
	import './add.less'
	import dicts from '@/mixins/dicts'
	import proposal from '@/mixins/proposal'
	import { TreeToArray } from '@/utils'
	import layer from '@/components/layer'
	export default {
		name: 'addCase',
		mixins: [dicts, proposal],
		data() {
			return {
				userInfo: this.$store.state.common.userInfo,
				infoType: '',
				infoName: '',
				infoCode: '',
				form: {
					ref: 'addCaseForm',
					rules: {
						reflectName: [
							{ required: true, message: '请输入举报人姓名', trigger: 'blur' }
						],
						reflectPhone: [
							{ required: true, message: '请输入举报人手机', trigger: 'blur' }
						],
						reflectSex: [
							{ required: true, message: '请选择举报人性别', trigger: 'change' }
						],
						creditDate: [
							{ type: 'date', required: true, message: '请选择授信时间', trigger: 'change' }
						],
					},
					uploadUrl: api.API_BASE_URL + '/upload'
				},
				// form数据
				formData: {
					caseInformer: {},
					caseBeReported: {},
					caseInfo: {},
					caseEvidences: [],
				},
				fileList: [],
				fileNames: [],
				search: {
					loading: false,
					list: [],
					timer: null
				},
				// 分部负责人列表
				deptPrincipalList: [],
				// 分部负责人
				deptPrincipal: {
					name: ''
				},
				// 提示
				tipsLayer: {
					show: false,
					title: '提示',
					tips: '添加案件确认提交后，所填字段将不可进行修改！'
				},
				//所属营业部
				salesDeptData: {
					loading: false,
					timer: null,
					list: []
				},
				// 提案审批
				proposalLayer: {
					show: false,
					title: '新增提案审批记录'
				}
			}
		},
		computed: {
			deptList() {
				return TreeToArray({ tree: this.$store.state.system.deptList })
			}
		},
		components: {
			layer
		},
		mounted() {
			this.$store.dispatch('setBreadData', [
				{
					name: ' 案件管理'
				},
				{
					name: '添加案件'
				}
			])
			if (this.$store.state.system.deptList && this.$store.state.system.deptList.length == 0) {
				this.$store.dispatch('getDeptList')
			}
			this.proposalTableData.data = []
			this.proposalTableData.type = 1
			this.proposalTableData.ajax = false
		},
		methods: {
			// 搜索被举报人所属公司和被举报人所属部门
			searchBusinessMethod(val) {
				if (this.salesDeptData.timer) {
					clearTimeout(this.salesDeptData.timer)
				}
				if (val !== '') {
					this.search.loading = true;
					this.search.timer = setTimeout(() => {
						api.queryDepartment({
							name: val
						}).then(res => {
							this.search.loading = false
							this.search.list = res.department
						}).catch(res => {
							console.log(res)
						})
					}, 200)
				}
				else {
					this.search.list = []
				}
			},
			// 上传文件之前验证格式
			beforeUpload(file) {
				if (file.size == 0) {
					this.$msg.error('上传文件大小不能为0B!')
					return false
				}
				// const isIamge = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
				//const limitSize = file.size / 1024 / 1024 < 100;

				// if (!isIamge) {
				//     this.$msg.error('上传文件只能是 JPG png gif格式!');
				// }
				// if (!limitSize) {
				// 	this.$msg.error('上传文件大小不能超过 100MB!');
				// }
				// return isIamge && limitSize;
				// return limitSize;
			},
			// 文件列表移除文件时的钩子	
			removeUploadFile(file, fileList) {
				this.fileList = fileList
			},
			// 上传文件成功
			uploadSuccess(res, file) {
				var _res = file.response
				if (_res.code == 10000) {
					let _obj = {}
					_obj.name = file.name
					_obj.url = _res.data.url
					this.fileList.push(_obj)
				}
				else {
					console.log(this.fileList)
					this.$msg.error(_res.msg);
				}
			},
			// 显示提示弹窗
			showTipsLayer() {
				if (this.formData.caseInformer.reflectPhone) {
					if (!/^1[3|5|6|7|8|9]\d{9}$/.test(this.formData.caseInformer.reflectPhone)) {
						this.$msg.error('举报人手机号格式不正确')
						return false
					}
				}
				if (this.formData.caseBeReported.beReportedPhone) {
					if (!/^1[3|5|6|7|8|9]\d{9}$/.test(this.formData.caseBeReported.beReportedPhone)) {
						this.$msg.error('被举报人手机号格式不正确')
						return false
					}
				}
				if (!this.formData.caseInfo.source) {
					this.$msg.error('请选择来源渠道')
					return false
				}
				if (!this.formData.caseInfo.product) {
					this.$msg.error('请选择产品类型')
					return false
				}
				if (!this.formData.caseInfo.reflectContent) {
					this.$msg.error('请输入反馈详情')
					return false
				}
				if (this.proposalTableData.data.length == 0) {
					this.$msg.error('请输入新增提案审批记录')
					return false
				}
				this.tipsLayer.show = true
			},
			// 提交
			submitForm() {
				if (this.deptPrincipal.name) {
					this.formData.caseInfo.salesDeptPrincipal = this.deptPrincipal.name
				}

				if (this.fileList.length) {
					this.formData.caseEvidences = []
					this.fileList.forEach(item => {
						let _obj = {};
						_obj.fileName = item.name
						_obj.fileUrl = item.url
						this.formData.caseEvidences.push(_obj)
					});
				}
				if (this.deptPrincipal.name) {
					this.formData.caseInfo.salesDeptPrincipal = this.deptPrincipal.name
				}
				// this.$refs[this.form.ref].validate((valid) => {
				// 	if (valid) {
				// this.formData.caseInformer.creditMoney = this.formData.caseInformer.creditMoney ? parseInt(this.formData.caseInformer.creditMoney).toFixed(2) : '';
				//         	this.formData.caseInformer.borrowMoney = this.formData.caseInformer.borrowMoney ? parseInt(this.formData.caseInformer.borrowMoney).toFixed(2) : '';

				// if (this.riskCategoryForm.id) {
				// 	let _category = this.dicts.riskCategory.find(item => item.id == this.riskCategoryForm.id)
				// 	if (_category) {
				// 		this.formData.caseInfo.riskCategory = _category.value
				// 	}
				// }
				// if (this.riskTypeForm.value) {
				// 	this.formData.caseInfo.riskType = this.riskTypeForm.value
				// }
				// if (this.riskLevelForm.value) {
				// 	this.formData.caseInfo.riskLevel = this.riskLevelForm.value
				// }
				this.formData.caseRisks = []
				this.proposalTableData.data.forEach((d, index) => {
					let _obj = {}
					_obj.riskType = d.riskType
					_obj.riskCategory = d.riskCategory
					_obj.riskLevel = d.riskLevel
					_obj.riskDisposeDate = d.riskDisposeDate
					_obj.riskDetails = d.riskDetails
					_obj.dataType = 1
					this.formData.caseRisks.push(_obj)
				})

				api.addCase(this.formData).then(res => {
					this.$msg.success('添加案件成功')
					this.$store.dispatch('getUnProcess')
					this.$router.replace('/case/violate')
				}).catch(res => {
					console.log(res)
				})
				// } else {
				// 	this.$msg.error('表单验证失败!')
				// }
				// })
			},
			// 取消
			cancelForm() {
				this.$router.go(-1)
			},
			// 选择所属分部
			selectSalesDeptName(name) {
				this.deptPrincipal = {}
				let id = this.deptList.find(res => res.name === name).id
				api.queryUser({
					deptId: id,
					pageSize: 100,
					pageIndex: 1
				}).then(res => {
					this.deptPrincipalList = res.list
				}).catch(res => {
					console.log(res)
				})
			},
			// 请搜索所属营业部
			searchSalesDept(val) {
				if (this.salesDeptData.timer) {
					clearTimeout(this.salesDeptData.timer)
				}
				if (val !== '') {
					this.salesDeptData.loading = true
					this.salesDeptData.timer = setTimeout(() => {
						let _data = {}
						_data.deptName = val
						_data.pageBean = {}
						_data.pageBean.pageIndex = 1
						_data.pageBean.pageSize = 1000
						api.queryDeptJc(_data)
							.then(res => {
								this.salesDeptData.loading = false
								this.salesDeptData.list = res.list
							})
							.catch(err => {
								this.salesDeptData.loading = false
								console.log(err)
							})
					}, 200)
				} else {
					this.salesDeptData.list = []
				}
			},
			// 举报人所属营业部
			salesDeptChange(val) {
				if (val) {
					let _obj = this.salesDeptData.list.find(d => d.id == val)
					if (_obj) {
						this.formData.caseInformer.salesDeptName = _obj.deptName
					}
				}
			}
		}
	}
</script>